<!doctype html>
<html lang="{{ config('app.locale') }}">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <link href="{{env('CDN_RESOURCE')}}/css/levelIntro/tablet.css" rel="stylesheet" type="text/css">
  <script src="{{env('CDN_RESOURCE')}}/js/jquery-2.1.4.min.js"></script>
  {{--<script type="text/javascript" src={{ asset("js/touchSwipe.min.js")}}></script>--}}

  <link rel="shortcut icon" type="image/x-icon" href="../icon/icon_web.png"/>
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

  <title>课程介绍</title>
</head>
<body>
<div class="wrap" id="wrap">
  <div class="page-content" id="pageContent">
    <div class="tab-nav">
      <span class="select">内容导览</span>
      <span>学习目标</span>
      <span>单元介绍</span>
      <div class="nav-cursor" id="navCursor"></div>
    </div>

    <div class="tabs">
      <div class="preview section">

        <div class="age content">

          <div class="title">
            <div class="age-icon"></div>
            适用年龄:
          </div>
          <span class="num"></span>
        </div>

        <div id="material" class="material content">

          <div class="title">
            <div class="material-icon"></div>
            对应等级:
          </div>
          <ul class="material-list">
          </ul>
        </div>

        <div class="brief content">
        </div>


        <img class="intro-img" src="">

      </div>


      <div class="objects section">

        <div class="object-item">
          <div class="title">主题</div>
          <ul class="content scenario-list">
          </ul>
        </div>

        <div class="object-item">
          <div class="title" id="vocab-senten">词汇/典型例句</div>
          <div class="content vocab-senten"></div>
        </div>

      </div>


      <div class="section unit-detail">

        <div class="unit-list"></div>

      </div>

    </div>
  </div>
</div>
</body>
</html>

<script type="text/javascript">


  $(document).ready(function () {

    var swipeIndex = 0
//
//        $('#wrap').height(window.innerHeight - 100);
//
//        $(window).resize(function () {
//            $('#wrap').height(window.innerHeight - 100);
//        });

    $('.tab-nav span').click(function () {

      var nav = $(this)
      var navIndex = $(this).index()
      swipeIndex = $(this).index()
      nav.fadeOut(125).addClass('select').fadeIn(125).siblings('span').removeClass('select')
      $('#navCursor').animate({
        left: nav.position().left
      }, 250)

      $('.tabs .section').eq(navIndex).fadeIn().siblings('.section').hide()
    })

//        //左右滑动
//        $('#pageContent').swipe({
//            swipe:function(event, direction) {
//
//                if(direction === 'left') {
//
//                    if(swipeIndex > 0 ) {
//                        swipeIndex--;
//                        $('.tab-nav span').eq(swipeIndex).click();
//                    }
//                } else if(direction === 'right'){
//                    if(swipeIndex < 3 ) {
//                        swipeIndex++;
//                        $('.tab-nav span').eq(swipeIndex).click();
//                    }
//                }
//            }
//        })

    var requestUrlArray = window.location.href.split('/')
    var requestCourseId = requestUrlArray[requestUrlArray.length - 1]

    //level 基本信息
    $.getJSON('/levelIntroductionJson/courseIntroduction.json', function (data) {
      var courseInfo = data['course' + requestCourseId]
      $('.num').text(courseInfo.preview.age)
      courseInfo.preview.material.forEach(function (data) {
        if (data !== '') {
          $('.material-list').append('<li class="item"> <span></span>' + data + '</li>')
        } else {
          $('.material-list').append('<li class="item" style="display:none"> <span></span>' + data + '</li>')
        }
      })

      courseInfo.preview.brief.forEach(function (data) {
        $('.brief').append('<p class="item">' + data + '</p>')

      })

      $('.intro-img').attr('src', courseInfo.image)

      courseInfo.objects.scenario.forEach(function (data) {
        $('.scenario-list').append('<li class="item">' + data + '</li>')
      })

      courseInfo.objects.vs.forEach(function (data) {
        $('.vocab-senten').append('<span class="item">' + data + '</span>')
      })

    })

    //level unit 课程信息
    $.getJSON('/levelIntroductionJson/course' + requestCourseId + '.json', function (data) {
      var courseDetail = data
      courseDetail.chapters.forEach(function (data, key) {
        var html = ''

        if (key === 0) {
          html += '<div class="unit active-unit">'
          $('.unit-list').append('<span class="select">Unit ' + (key + 1) + '</span>')
        } else {
          html += '<div class="unit">'
          $('.unit-list').append('<span>Unit ' + (key + 1) + '</span>')
        }

        html += '<div class="object">' +
          '<span class="title">' + ($.trim(data.name) !== '' ? data.name + ': ' : '') + '</span>' +
          '<span class="item">' + data.description + '</span>' +
          '</div>' +

          '<table class="unit-content">' +
          '<tr>' +
          '<th class="short"></th>' +
          '<th class="long">目标</th>' +
          '<th class="long">词汇</th>' +
          '<th class="long">句型</th>' +
          '</tr>'

        data.lessons.forEach(function (unitDetail) {

          var sentence = unitDetail.sentence === '' || unitDetail.sentence === null ? '' : unitDetail.sentence.replace(/\n/g, '<br>')
          html += '<tr>' +

            '<td class="short">Lesson ' + (unitDetail.name || '') + '</td>' +
            '<td class="long">' +
            '<span class="item">' + (unitDetail.descriptionCN || '') + '</span>' +
            '</td>' +
            '<td class="long">' +
            '<span class="item">' + (unitDetail.vocabulary || '') + '</span>' +
            '</td>' +
            '<td class="long">' +
            '<span class="item">' + (sentence || '') + '</span>' +
            '</td>' +
            '</tr>'
        })

        html += '</table></div>'

        $('.unit-detail').append(html)
      })
      $('.unit-list').append('<div class="u-nav-cursor" id="unavCursor"></div>')
      $('.unit-list span').click(function () {
        var nav = $(this)
        var navIndex = $(this).index()
        $('#unavCursor').animate({
          left: nav.position().left
        }, 250)
        $('.unit-list span').eq(navIndex).addClass('select').siblings('span').removeClass('select')
        $('.unit').eq(navIndex).addClass('active-unit').siblings('.unit').removeClass('active-unit')
      })
      if (data.seriesId === 3) {
        $('#material').hide()
        $('#vocab-senten').text('高频词句')
      }

    })

  })

</script>

